<template>
	<view @touchmove.stop.prevent :class="{'iscenter':type=='center'}" :style="{zIndex:show?maskZIndex:-1}">
		<view class="l-popup" :class="{ 'popup-show': show }" :style="{ background: backgroundColor, height: computedHeight,width: computedWidth,bottom:bottom,top:top,right:right,left:left, zIndex: zIndex,transform:transform,margin:type=='center'?'auto':'',position: type=='center'?'relative':'fixed',borderRadius:borderRadius }">
			<slot></slot>
		</view>
		<view class="popup-mask" :class="[show ? 'mask-show' : '']" :style="{ zIndex: maskZIndex }" v-if="mask" @tap="handleClose"></view>
	</view>
</template>

<script>
	export default {
		name: 'lPopup',
		props: {
			//是否需要mask
			mask: {
				type: Boolean,
				default: true
			},
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			//背景颜色
			backgroundColor: {
				type: String,
				default: '#fff'
			},
			//高度 rpx
			height: {
				type: Number,
				default: 0
			},
			//设置圆角
			radius: {
				type: Number,
				default: 0
			},
			zIndex: {
				type: [Number, String],
				default: 997
			},
			maskZIndex: {
				type: [Number, String],
				default: 996
			},
			//弹层从哪弹出 bottom下 top上 left左 right右
			type: {
				type: String,
				default: 'center'
			}
		},
    data(){
      return{
      }
    },
    computed:{
      borderRadius(){
        if(this.type == 'bottom'){
          return `${this.radius + 'rpx'} ${this.radius + 'rpx'} 0 0`
        }else if(this.type == 'top'){
          return `0 0 ${this.radius + 'rpx'} ${this.radius + 'rpx'}`
        }else if(this.type == 'left'){
          return `0 ${this.radius + 'rpx'} ${this.radius + 'rpx'} 0`
        }else if(this.type == 'right'){
          return `${this.radius + 'rpx'} 0 0 ${this.radius + 'rpx'}`
        }else if(this.type == 'center'){
          return `${this.radius + 'rpx'} ${this.radius + 'rpx'} ${this.radius + 'rpx'} ${this.radius + 'rpx'}`
        }
      },
      transform(){
        let transform = null
        if(this.show){
          if(this.type == 'center'){
            transform = 'scale(1)'
          }else{
            transform = 'translate3d(0, 0, 0)'
          }
          
        }else{
          if(this.type == 'bottom'){
            transform = 'translate3d(0, 100%, 0)'
          }else if(this.type == 'top'){
            transform = 'translate3d(0, -100%, 0)'
          }else if(this.type == 'left'){
            transform = 'translate3d(-100%, 0, 0)'
          }else if(this.type == 'right'){
            transform = 'translate3d(100%, 0, 0)'
          }else if(this.type == 'center'){
            transform = 'scale(0)'
          }
        }
        return transform
      },
      computedHeight(){
        if(this.type == 'bottom' || this.type == 'top'){
          return this.height ? this.height + 'rpx' : 'auto'
        }else if(this.type == 'left' || this.type == 'right'){
          return '100%'
        }else if(this.type == 'center'){
          return 'auto'
        }
      },
      computedWidth(){
        if(this.type == 'bottom' || this.type == 'top'){
          return '100%'
        }else if(this.type == 'left' || this.type == 'right'){
          return 'auto'
        }else if(this.type == 'center'){
          return 'auto'
        }
      },
      top(){
        if(this.type == 'bottom'){
          return ''
        }else if(this.type == 'top'){
          return '0'
        }else if(this.type == 'left'){
          return '0'
        }else if(this.type == 'right'){
          return '0'
        }else if(this.type == 'center'){
          return ``
        }
      },
      left(){
        if(this.type == 'bottom'){
          return '0'
        }else if(this.type == 'top'){
          return '0'
        }else if(this.type == 'left'){
          return '0'
        }else if(this.type == 'right'){
          return ''
        }else if(this.type == 'center'){
          return ``
        }
      },
      right(){
        if(this.type == 'bottom'){
          return '0'
        }else if(this.type == 'top'){
          return '0'
        }else if(this.type == 'left'){
          return ''
        }else if(this.type == 'right'){
          return '0'
        }else if(this.type == 'center'){
          return ``
        }
      },
      bottom(){
        if(this.type == 'bottom'){
          return '0'
        }else if(this.type == 'top'){
          return ''
        }else if(this.type == 'left'){
          return '0'
        }else if(this.type == 'right'){
          return '0'
        }else if(this.type == 'center'){
        }
      },
    },
		methods: {
			handleClose() {
				if (!this.show) {
					return;
				}
				this.$emit('mask');
			}
		}
	};
</script>

<style scoped>
  .iscenter{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: -1;
    transition: all 0.3s ease-in-out;
  }
	.l-popup {
    position:fixed;
		opacity: 0;
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		min-height: 20rpx;
		padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
	}
	

	.popup-show {
		opacity: 1;
	}

	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.mask-show {
		opacity: 1;
		visibility: visible;
	}
</style>
